<template>
  <div class="app-container">
    <el-card>
      <el-form :inline="true" :model="queryForm" style="display: flex;">
        <el-form-item label="关键字:">
          <el-input v-model="queryForm.keyword" placeholder="请输入关键字" style="width: 400px;" prefix-icon="el-icon-search"
                    size="small"
                    clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="fetchData(1)">查询</el-button>
        </el-form-item>

      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        stripe
        highlight-current-row
      >
        <el-table-column align="center" label="订单号" width="128">
          <template v-slot="scope">
            {{ scope.row.AUFNR }}
          </template>
        </el-table-column>
        <el-table-column label="订单类型" width="80">
          <template v-slot="scope">
            {{ scope.row.AUART }}
          </template>
        </el-table-column>
        <el-table-column label="工厂" >
          <template v-slot="scope">
            {{ scope.row.WERKS }}
          </template>
        </el-table-column>
        <el-table-column label="物料编号" width="80">
          <template v-slot="scope">
            {{ scope.row.MATNR }}
          </template>
        </el-table-column>
        <el-table-column label="订单数" align="center" width="110">
          <template v-slot="scope">
            <span>{{ scope.row.GAMNG }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已交货" align="center" width="110">
          <template v-slot="scope">
            <span>{{ scope.row.GWEMG }}</span>
          </template>
        </el-table-column>

        <el-table-column label="销售数" align="center" width="110">
          <template v-slot="scope">
            <span>{{ scope.row.KDAUF }}</span>
          </template>
        </el-table-column>

        <el-table-column label="销售编号" align="center" width="150">
          <template v-slot="scope">
            <span>{{ scope.row.KDPOS }}</span>
          </template>
        </el-table-column>

        <el-table-column label="售达方" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.KUNNR }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="开始日期" width="110">
          <template v-slot="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.GSTRP }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="完成日期" width="110">
          <template v-slot="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.GLTRP }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="操作" align="center" width="120">
          <template v-slot="scope">
            <el-button size="mini" icon="el-icon-edit" type="primary" style="margin: 10px 0 0 0;" @click="$router.push({path:'/workOrderSys/creatMultipleOrder',query:{saleID:scope.row.AUFNR}})">创建</el-button>
            <el-button size="mini" icon="el-icon-edit" type="primary" style="margin: 10px 0 0 0;" @click="$router.push({path:'/sapSys/sapOrder',query:{saleID:scope.row.AUFNR}})">查找</el-button>
          </template>
        </el-table-column>


      </el-table>
      <div style="width: 100%;text-align: center;margin:24px 0 0 0;">
        <el-pagination
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :total="total"
          @current-change="fetchData(currentPage)"
        />

      </div>
    </el-card>
  </div>
</template>

<script>
import { DATE_RANGE_OPTIONS, MAPPER, PAGE_SIZES, STATUS_OPTIONS } from '@/utils/common'
import { archiveOrder, getToDoOrder, moveOrder, toFreeStore } from '@/api/table'
import { findUser } from '@/api/user'
import {getFindSapList, getSapList} from '@/api/sap'

export default {
  name: 'SapManage',
  filters: {

  },
  data() {
    return {

      currentPage: 1,
      pageSize: PAGE_SIZES,
      total: 0,
      queryForm: {
        isMainOrder: false,
        keyword: '',
        status: [],
        creatorUid: '',
        dateRange: null
      },
      list: null,
      listLoading: true,
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  created() {
    this.fetchData(1);

  },
  methods: {
    setDefaultData() {
      var al = [];
      for (let i = 0; i < 10; i++) {
        al.push({
          'AUFNR': 'adwawd',
          'AUART': 'ab',
          'WERKS': 'ac',
          'MATNR': 'ad',
          'GAMNG': 13,
          'GWEMG': 11,
          'GSTRP': '20201212',
          'GLTRP': '20201212',
          'KDAUF': 'ad',
          'KDPOS': 12,
          'KUNNR': 'ad'
        });
      }
      this.list = al;
    },

    handleRes(res) {
      this.list = res.data.data;
      this.total = res.data.total === 0 ? 10 : res.data.total;
      this.listLoading = false;

      // this.setDefaultData();
    },


    fetchData(page) {
      console.log('fetch ', page)
      if (this.queryForm.keyword === '') {
        console.log('not find')
        getSapList(page).then(res => this.handleRes(res));
      } else {
        console.log('find')
        getFindSapList(page, 10, this.queryForm.keyword).then(res => this.handleRes(res));
      }
    }
  }
}
</script>
